<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/card.css">
		<link rel="stylesheet" href="css/fr_style.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
		<style>
			.list.list5 li {
				min-width: 200px;
			}
			
			.fr_card_trendText {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			
			.fr_card_title {
				line-height: 25px;
				height: 50px;
			}
			#walletList,.tabBody{
				padding:10px 0;
			}
			#walletList li{
				display: inline-block;
				width:100px;
				line-height:35px;
				text-align:center;
				border:1px solid #ccc;
				background-color: #ccc;
				color:#fff;
				margin-right:10px;
				cursor:pointer;
			}
			#walletList li.active{
				background-color: #43CF7C;
				border:1px solid #43CF7C;
			}
			.tabBody .wallet_id{
				display: none;
			}
			.tabBody .wallet_id.active{
				display: block;
			}
			.tabBody .wallet_id table tr td,
			.tabBody .wallet_id table tr th{
				width:150px;
				height:40px;
				text-align: center;
				border:1px solid #aaa;
			}
			.tabBody .wallet_id table tr th{
				background-color: #ccc;
				font-weight:normal;
			}
			.tabBody .wallet_id table{
				border: 1px solid #ccc;
			}
			.marginTop{
				margin-top: 10px;
			}
		</style>
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">

			<div class="content-wrapper">
				<section class="content-header ">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>数据中心</a>
						</li>
						<li class="active">数据分析</li>
					</ol>
				</section>
				<section class="content">
					<div class="box" style="margin-top:10px;">
						<div class="box-header" style="border-bottom:1px solid #eee;">
							<h4 class="box-title" style="font-size:14px;">云计算统计</h4>
						</div>
						<div class="box-body" style="padding-bottom: 20px;">
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix btn-primary">
									<div class="fr_card_trendText" name="today_buy_number">--</div>
									<div class="fr_card_title">今日购买次数</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-olive">
									<div class="fr_card_trendText"><span name="today_power_add_number">--</span></div>
									<div class="fr_card_title">今日基础算力新增</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-yellow">
									<div class="fr_card_trendText"><span name="today_netpower_add_number">--</span></div>
									<div class="fr_card_title">今日网络算力新增</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix btn-github">
									<div class="fr_card_trendText" name="all_buy_number">--</div>
									<div class="fr_card_title">总购买次数</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-purple">
									<div class="fr_card_trendText"><span name="all_power_add_number">--</span></div>
									<div class="fr_card_title">总基础算力</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-maroon">
									<div class="fr_card_trendText"><span name="all_netpower_add_number">--</span></div>
									<div class="fr_card_title">总网络算力</div>
								</div>
							</div>
							
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix btn-info">
									<div class="fr_card_trendText" name="today_power_add_gt_number">--</div>
									<div class="fr_card_title">今日算力GT购买数量</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-green">
									<div class="fr_card_trendText" name="today_power_add_yc_number">--</div>
									<div class="fr_card_title">今日算力YC购买数量</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-orange">
									<div class="fr_card_trendText" name="all_power_add_gt_number">--</div>
									<div class="fr_card_title">总算力GT购买数量</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-navy">
									<div class="fr_card_trendText" name="all_power_add_yc_number">--</div>
									<div class="fr_card_title">总算力YC购买数量</div>
								</div>
							</div>
						</div>
					</div>
					<div class="box" style="margin-top:10px;">
						<div class="box-header" style="border-bottom:1px solid #eee;">
							<h4 class="box-title" style="font-size:14px;">质押空投统计</h4>
						</div>
						<div class="box-body">
							<ul class="tab" id="walletList"></ul>
							<div class="tabBody">
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
									<div class="fr_card clearfix btn-primary">
										<div class="fr_card_trendText" name="today_pledge_user_number">--</div>
										<div class="fr_card_title">今日质押次数</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
												<div class="fr_card clearfix bg-olive">
										<div class="fr_card_trendText" name="today_pledge_coin_number">--</div>
										<div class="fr_card_title">今日质押数量(GF)</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
											<div class="fr_card clearfix bg-yellow">
										<div class="fr_card_trendText" name="all_pledge_user_number">--</div>
										<div class="fr_card_title">总质押次数</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
										<div class="fr_card clearfix btn-github">
										<div class="fr_card_trendText" name="all_pledge_coin_number">--</div>
										<div class="fr_card_title">总质押数量(GF)</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
											<div class="fr_card clearfix bg-purple">
										<div class="fr_card_trendText" name="today_airdrop_coin_number">--</div>
										<div class="fr_card_title">今日空投数量(FIL)</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
											<div class="fr_card clearfix bg-maroon">
										<div class="fr_card_trendText" name="all_airdrop_coin_number">--</div>
										<div class="fr_card_title">历史空投总数(FIL)</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
											<div class="fr_card clearfix bg-maroon">
										<div class="fr_card_trendText" name="today_cancel_number">--</div>
										<div class="fr_card_title">今日解押数量</div>
									</div>
								</div>
								<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
											<div class="fr_card clearfix bg-purple">
										<div class="fr_card_trendText" name="valid_pledge_number">--</div>
										<div class="fr_card_title">当前有效质押数量</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box-footer">

						</div>
					</div>
					<div class="box" style="margin-top:10px;">
						<div class="box-header" style="border-bottom:1px solid #eee;">
							<h4 class="box-title" style="font-size:14px;">引力场兑换统计</h4>
						</div>
						<div class="box-body chat">
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
							<div class="fr_card clearfix btn-info">
									<div class="fr_card_trendText" name="today_exchange_user_number">--</div>
									<div class="fr_card_title">今日兑换次数</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
							<div class="fr_card clearfix bg-green">
									<div class="fr_card_trendText" name="today_exchange_info"><span name="usdt_number">--</span>/<span name="ex_coin_number">--</span></div>
									<div class="fr_card_title">今日兑换数量(USDT/GT)</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
						<div class="fr_card clearfix bg-orange">
									<div class="fr_card_trendText" name="all_exchange_user_number">--</div>
									<div class="fr_card_title">总兑换次数</div>
								</div>
							</div>
							<div class="col-md-2 col-sm-3 col-xs-6 marginTop">
								<div class="fr_card clearfix bg-navy">
									<div class="fr_card_trendText" name="all_exchange_info"><span name="usdt_number">--</span>/<span name="ex_coin_number">--</span></div>
									<div class="fr_card_title">总兑换数量(USDT/GT)</div>
								</div>
							</div>
						</div>
						<!-- /.chat -->
						<div class="box-footer">

						</div>
					</div>
				</section>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="dist/js/adminlte.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

		<script src="js/echarts.min.js"></script>

		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<script type="text/javascript">
		</script>
		<script type="text/javascript">
			// $(".sidebar-menu").find("li[code = 250]").addClass("active")
			$("#walletList").on("click",'li',function(){
				console.log(1)
				if(!$(this).hasClass("active")){
					$(this).addClass("active").siblings("li").removeClass("active");
					var index = $(this).index();
					$(".tabBody").find(".wallet_id").eq(index).addClass('active').siblings().removeClass('active');
					//$(this).addClass("active").siblings("li").removeClass("active");
				}
			})
			
			function sortKey(array, key) {
		        return array.sort(function(a, b) {
		          	var x = a[key];
		          	var y = b[key];
		         	return x < y ? -1 : x > y ? 1 : 0;
		        });
		    }
			
			function renderOption(Json){
				var legendData=[],XData=[],seriesData=[];
				var arr=[];
				
				
				console.log(Json)
				$.each(Json.data,function(index,item){
					arr.push({time:index,value:item})
				})
				console.log(arr);
				var timeArr = sortKey(arr, "time");
				console.log(timeArr);
				var option = {
					legend: {
						data: legendData,//['近七天对外转出', '近七天外部转入', '近七天总利润', '近七天用户注册数量'],
						top: 50,
						right: 10,
						width: 150,
						icon: 'roundRect',
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					color: ['#4293F7', '#B189DF', '#1DC2B6', '#FF8D1A'],
					xAxis: [

						{
							type: 'category',
							color: "#ccc",
							data: XData,//['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
						}
					],
					yAxis: {
						type: 'value'

					},
					series: [
//						{
//							name: '近七天对外转出',
//							type: 'line',
//							stack: '总量',
//							data: [120, 132, 101, 134, 90, 230, 210]
//						},
//						{
//							name: '近七天外部转入',
//							type: 'line',
//							stack: '总量',
//							data: [220, 182, 191, 234, 290, 330, 310]
//						},
//						{
//							name: '近七天总利润',
//							type: 'line',
//							stack: '总量',
//							data: [150, 232, 201, 154, 190, 330, 410]
//						},
//						{
//							name: '近七天用户注册数量',
//							type: 'line',
//							stack: '总量',
//							data: [320, 332, 301, 334, 390, 330, 320]
//						},

					]
				};
				
				return option;
			}

			function getStatistical() {
				$.ajax({
					type: "post",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					url: url + "Back_MineStatistics",
					contentType: "application/json",
					dataType: "json",
					success: function(res) {
						if(res.status == 1) {
							$.each(res.data,function(index,item){
								console.log(index)
								if( index == 'all_exchange_info' || index == 'today_exchange_info'){
									console.log()
									$("[name = "+index+"] [name=ex_coin_number]").text(item.ex_coin_number)
									$("[name = "+index+"] [name=usdt_number]").text(item.usdt_number)
									return 
								}
								$("[name = "+index+"]").text(Number(item));
							})
							
						} else if(res.status == 1000||res.status == 102) {
							ToLogin(res);
						} else {
							alert(res.error);
							return false;
						}

					}
				})

			}
			getStatistical();
		</script>
	</body>

</html>